<script setup>
import { onMounted, ref, computed, nextTick, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from "@/store/user";
import { submitCommentApi } from "@/apis/comment";
import { addAdditionalCommentApi, getAdditionalCommentListApi } from "@/apis/additionalComment";
import { getAllAttentionListApi } from '@/apis/mention'



const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

const data = defineProps({
  getCommentList: {
    type: Function,
    required: true
  },
  getPostDetail: {
    type: Function,
    required: true
  },
  /* 手机端添加评论 */
  phoneAddComment: {
    type: Function,
  }
})

// #region emotion

//引入emotion图标库
import V3Emoji from "vue3-emoji";
import "vue3-emoji/dist/style.css"
import { ElMessage, inputEmits } from 'element-plus';

//点击表情触发的函数
const onVue3Emoje = (val) => {

  comment.value = comment.value + val;
};


// 表情包的配置,中文化
const optionsName = {
  'Smileys & Emotion': '笑脸&表情',
  'Food & Drink': '食物&饮料',
  'Animals & Nature': '动物&自然',
  'Travel & Places': '旅行&地点',
  'People & Body': '人物&身体',
  Objects: '物品',
  Symbols: '符号',
  Flags: '旗帜',
  Activities: '活动'
};


// #endregion emotion结束




// #region 图片代码
// 上传图片的列表
const fileList = ref([])


//删除方法
const handleRemove = (file) => {

  const index = fileList.value.indexOf(file);
  if (index !== -1) {
    fileList.value.splice(index, 1);
  }

  //调用删除图片的接口，直接去数据库将这个url删掉即可
}


// 上传图片成功的方法
const handleSuccess = (res, file, fileList) => {

  //成功方法会把展示的file数据和后台返回的数据都拿到
  file.url = res.data
  try {
    fileList.value.push(file)

  } catch (error) {
  }
}




//上传图片时的检查
const handleBeforeUpload = (file) => {
  if (file.type !== 'image/gif' && file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png') {
    ElMessage.error('请上传jpg/jpeg/png/gif格式图片!')
    return false
  } else if (file.size / 1024 / 1024 > 3) {
    ElMessage.error('图片超过3MB!')
    return false
  }

}


/* 将图片对象转为字符串数组 */
const fileListString = computed(() => {
  return fileList.value.map((file) => file.url)
})

const useStore = useUserStore();

/* 获得token */
const token = computed(() => {
  return useStore.token
})



// #endregion




// #region 发表评论代码


// 输入框内容
const comment = ref('');



// 发表事件
async function published() {

  /* 判断它是否为空，来判断这是发表评论还是回复别人的评论 */


  /* 等于0 就说明这是发表评论，否则是回复别人的评论 */
  if (messageCommentId.value === 0) {
    await addComment()
  } else {
    await addAdditionalComment()
  }

  // 给定判断，这不是点击了底部，是输入完内容后，自动的取消焦点
  isClickContainer.value = false;
  // 输入框失去焦点
  inputRef.value.blur();


}


/* 添加评论的代码 */
const addComment = async () => {
  // 获得图片列表
  const imgList = fileList.value.map(item => item.url)

  // 判断图片不能为空
  if (comment.value.trim() === '') {
    ElMessage.error('内容不能为空!')
    return
  }

  // 发送请求
  const res = await submitCommentApi({
    userId: useStore.userInfo.id,
    content: comment.value,
    postId: route.params.id,
    imgList
  })

  comment.value = ''

  fileList.value = []



  //再次发送请求获取评论列表
  data.phoneAddComment()

  //再次发送请求获得帖子详情
  data.getPostDetail()

  // 再次获得经验值
  useStore.getExperience()

  ElMessage({
    type: 'success',
    message: res.data,
    duration: 2 * 1000,
  })

}


// #region 添加追评代码

const addAdditionalComment = async () => {
  // 发送请求添加追评
  const ref = await addAdditionalCommentApi({
    content: comment.value,
    beCommentUserId: messageUserId.value,
    userId: userStore.userInfo.id,
    commentId: messageCommentId.value
  })


  ElMessage({ type: 'success', message: ref.data })


  comment.value = ''

  // 重新获取追评列表
  await additionalCommentListFn()

}

// #endregion

// #endregion







// 按钮是否可见
const submitDisabled = ref(false);
// 表情包与图片是否可见
const imageEmoDisabled = ref(false);

const messageContent = ref('');
const messageCommentId = ref(0)
const messageUserId = ref(0)
// 存储传递的函数
let additionalCommentListFn = null;


//判断当前是应该显示回复框还是隐藏回复框
const mFocus = ref(true)

// 取消焦点自然就缩小了
const isFocus = (content, commentId, userId, getAdditionalCommentList) => {

  messageContent.value = content;
  messageCommentId.value = commentId;
  messageUserId.value = userId;
  additionalCommentListFn = getAdditionalCommentList;



  //一开始Input不是焦点，mFocus也不是焦点，那么就让他获得焦点
  if (mFocus.value) {
    inputRef.value.focus();


  }
}


/* 判断是否是点击了底部容器，如果是点击了底部容器，就让输入框继续获得焦点 */
const isClickContainer = ref(false)


const containerClick = () => {
  isClickContainer.value = true;

}


// #region @功能的实现
// @ div 的ref
const atDivRef = ref(null);

/* 关注列表 */
const attentionList = ref([])

/* 点击选项时，将这个名字传入到comment中 */
const clickAtItem = (userName) => {
  /* 将userName加入到comment中 */
  comment.value = comment.value + '@' + userName + ' '
}

/* 切换@功能的开关 */
const switchAT = async (event) => {
  event.stopPropagation();

  /* 显示与隐藏 */
  atDivRef.value = !atDivRef.value

  /* true 就显示，false就隐藏 */
  if (atDivRef.value) {
    /* 高度自适应 */
    containerRef.value.style.height = '320px'

    /* 获取数据 */
    if (attentionList.value.length === 0) {
      const res = await getAllAttentionListApi(useStore.userInfo.id)
      attentionList.value = res.data
    }
  } else {
    /* 移除行内高度样式，让类样式生效 */
    containerRef.value.style.height = ''
    /* 高度自适应 */


  }

}


/* 切换@ 功能的颜色 */
const ATColor = computed(() => {
  return atDivRef.value ? '#007bff' : '#999'
})


/* 获得关注用户列表 */


// #endregion



/* 图片与emo的ref */
const imageEmoRef = ref(null);

/* 整个容器的ref */
const containerRef = ref(null);

/* 输入框的ref */
const inputRef = ref(null);


/* 绑定获取焦点方法和失去焦点方法 */
setTimeout(() => {


  // element-ui的input组件没有focus,blur事件。用原生的input元素代替
  inputRef.value.addEventListener('focus', () => {
    /* 为整个容器添加样式 */
    containerRef.value.classList.add('containerFocus');
    /* 为输入框添加样式 */
    inputRef.value.classList.add('inputFocus');
    /* 按钮出现 */
    submitDisabled.value = true;
    /* 图片与emo出现 */
    imageEmoDisabled.value = true;

    mFocus.value = false;
  });



  // 当输入框失去焦点时，恢复容器的高度
  inputRef.value.addEventListener('blur', () => {

    /* 如果点击底部容器，就让输入框获得焦点，这用于图片和表情包的切换 */
    if (isClickContainer.value) {

      inputRef.value.focus();
      return;
    }

    /* 来到这里就是需要收起回复框了，那么就要将@框隐藏 */
    atDivRef.value = false;
    /* 移除行内高度样式，让类样式生效 */
    containerRef.value.style.height = '';

    //延迟0.1s执行，防止闪烁。同时解决一点击直接将发表按钮隐藏，导致无法发表的问题
    setTimeout(() => {
      containerRef.value.classList.remove('containerFocus');
      inputRef.value.classList.remove('inputFocus');
      submitDisabled.value = false;
      mFocus.value = true;
      imageEmoDisabled.value = false;

      /* 清空回复别人的评论 */
      messageContent.value = '';
      messageCommentId.value = 0;
      messageUserId.value = 0;

    }, 200);
  });


}, 100)


defineExpose({
  isFocus,
  isClickContainer,
  inputRef,
  messageContent

})


</script>

<template>

  <div class="container1" ref="containerRef" @click="containerClick($event)">
    <!-- @区 -->
    <div class="at-container" v-if="atDivRef">
      <ul>
        <el-scrollbar height="200px">
          <li v-for="item in attentionList">
            <div class="at-item" @click="clickAtItem(item.value)">
              <el-avatar :size="24" :src="item.avatar" />
              <span style="margin-left: 6px">{{ item.label }}</span>
            </div>
          </li>
        </el-scrollbar>
      </ul>
    </div>

    <!-- 回复人的内容 -->
    <div class="reply-content" v-if="messageContent">回复：{{ messageContent }}</div>
    <!-- 上传图片组件 -->
    <div class="image-emo" ref="imageEmoRef" v-if="imageEmoDisabled">
      <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false" class="upload"> -->
      <el-upload action="/api/common/upload" :headers="{ token }" name="file" list-type="picture-card"
        :auto-upload="true" :before-upload="handleBeforeUpload" :on-success="handleSuccess"
        v-model:file-list="fileList">
        <el-icon>
          <Picture />
        </el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
              <!-- 删除按钮 -->
              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                <el-icon>
                  <Delete />
                </el-icon>
              </span>

            </span>
          </div>
        </template>
      </el-upload>

      <!-- 表情包组件 -->
      <V3Emoji v-model="comment" :options-name="optionsName" :textArea="true" class="emoji" @click-emoji="onVue3Emoje"
        :recent="true" fixPos='top' size="mid">
      </V3Emoji>

      <!-- @功能 -->
      <svg-icon name="aite" :fill="ATColor" @click="switchAT($event)"></svg-icon>
    </div>
    <div class="container">
      <textarea v-model="comment" class="input1" ref="inputRef" placeholder="评论一下吧，思密达"></textarea>

      <el-button class="submit" type="primary" v-if="submitDisabled" @click="published">发表</el-button>
    </div>

  </div>
</template>

<style lang='scss' scoped>
/* @高度 */
.at-height {
  height: 320px;
}


//总体的布局
.container1 {
  width: 100vw;
  // min-height: 50px;
  border-radius: 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 15px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(185, 182, 182);
  z-index: 999;

  /* @区 */
  .at-container {
    width: 100%;
    min-height: 100px;

    .at-item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border: 1px solid #dddbdb;
      margin-bottom: 5px;
      border-radius: 10px;
    }
  }


  /* 回复框上面的提示，是回复别人的上面内容 */
  .reply-content {
    color: #999;
    /* 不换行 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .image-emo {
    display: flex;
    align-items: center;

    // 上传图片的样式   点击框的样式 
    ::v-deep .el-upload--picture-card {
      width: 30px;
      height: 30px;
      line-height: 30px;
      border: none;
    }

    //上传图片的样式     图片的样式
    ::v-deep .el-upload-list--picture-card .el-upload-list__item {
      width: 30px !important;
      height: 30px !important;
    }

    // 表情包的样式
    .emoji {
      // border: 1px solid red;
      margin: 0 10px;
      width: 30px;
      margin-bottom: 8px;
    }



  }


  //第二行输入框，点赞，收藏的样式
  .container {
    display: flex;
    align-items: center;
    // border: 1px solid red;
    height: 50px;
    z-index: 999;

    .input1 {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 5px;
      // margin-right: 10px;

      &.focus {
        outline: none;
        border-color: #007bff;
      }
    }

    .submit {
      margin-left: 10px;
      align-items: end;
    }
  }



}

.containerFocus {
  height: 120px;
  /* 设定点击输入框后容器的高度 */

  .image-emo {
    display: flex;
  }
}

.inputFocus {
  height: 50px;

  /* 设定点击输入框后容器的高度 */
  .image-emo {
    display: flex;
  }
}
</style>